<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-04 01:12:16"
-->
<template>
  <v-select
    no-data-text="无标签"
    :loading="loading"
    :items="tagsList"
    v-model="value"
    @blur="changeHandle"
    loader-height="2"
    chips
    :menu-props="{ top: true, offsetY: true, outlined: true }"
    label="点击添加用户标签"
    item-text="name"
    item-value="id"
    solo
    flat
    dense
    multiple
    hide-details
    z-index="5555"
  >
    <template v-slot:selection="{ item, index }">
      <v-chip :key="index" label x-small><span>{{ item.name }}</span></v-chip>
    </template>
  </v-select>
</template>
<script>
import { setMemberTags } from '@/api/admin/wx-member-tags.js'
export default {
  name: 'WxMemberTagsSelect',
  components: {},
  props: {
    wx_tags: Array,
    wx_openid: String
  },
  data: function () {
    return {
      loading: false,
      value: this.wx_tags
    }
  },
  computed: {
    tagsList: function() {
      return this.$store.state.wxtags.tags
    }
  },
  methods: {
    changeHandle: function(event) {
      const newSet = this.value.filter(tag => {
        return !this.wx_tags.includes(tag)
      })
      const unSet = this.wx_tags.filter(tag => {
        return !this.value.includes(tag)
      })
      if (newSet.length === 0 && unSet.length === 0) {
        return null
      } else {
        this.loading = true
        setMemberTags(this.wx_openid, this.value, newSet, unSet).then(res => {
          // this.$emit('update:wx_tags', tags)
          // this.$toasted.success(res.data)
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
